<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-customized-area-multgrid',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'line'
    }
  },

  computed: {
    option () {
      let yAxis = []
      let xAxis = []
      let grid = []
      let series = []
      let dataxAxis = []
      let dataseries = []
      let seriesdata = []
      let length = this.data[0].length
      let height = Math.floor(90 / (length - 1))
      this.data.forEach((item, index) => {
        if (index === 0) {
          item.forEach((itm, idx) => {
            if (idx > 0) {
              yAxis.push({
                gridIndex: idx - 1,
                axisLabel: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                splitNumber: 1,
                name: itm,
                nameTextStyle: {
                  color: this.nameStyleColor,
                  fontSize: this.nameStyleSize,
                },
                nameLocation: 'center',
                nameRotate: 360
              })

              if (idx === item.length - 1) {
                grid.push({
                  bottom: '8%',
                  left: '80',
                  height: '15%'
                })
              } else {
                grid.push({
                  top: height * (idx - 1) + 5 + '%',
                  left: '80',
                  height: '15%'
                })
              }
              dataseries.push([])
            }
          })
        } else {
          dataxAxis.push(item[0])
          item.forEach((itm, idx) => {
            if (idx > 0) {
              dataseries[idx - 1].push(itm)
            }
          })
        }
      })

      for (let i = 0; i < length - 1; i++) {
        xAxis.push({
          gridIndex: i,
          show: i === length - 2 ? true : false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: this.axisLabelColor,
            fontSize: this.axisLabelFontSize
          },
          type: 'category',
          boundaryGap: false,
          data: dataxAxis
        })

        series.push({
          type: this.chartType,
          data: dataseries[i],
          xAxisIndex: i,
          yAxisIndex: i,
          smooth: this.isSmooth,
          areaStyle: {}
        })
      }

      return {
        color: this.colors,

        grid: grid,
        // {
        //   show: this.showGrid,
        //   left: this.gridLeft === '' ? 'auto' : this.gridLeft,
        //   top: this.gridTop === '' ? 'auto' : this.gridTop,
        //   right: this.gridRight === '' ? 'auto' : this.gridRight,
        //   bottom: this.gridBottom === '' ? 'auto' : this.gridBottom,
        //   borderWidth: 0,
        //   containLabel: true
        // },
        tooltip: {
          trigger: this.triggerType,
          confine: this.confine,
          extraCssText: this.confine ? 'white-space: normal; word-break: break-all;' : '',
          formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
        },

        xAxis: this.showAxis ? xAxis : null,
        yAxis: this.showAxis ? yAxis : null,
        // dataset: {
        //   source: this.data
        // },
        series: series
      }
    }
  },

  methods: {
    setSeries () {

    },

    // RGB(A)颜色转换为HEX十六进制的颜色值
    rgbToHex (val) {
        let r = ''
        let g = ''
        let b = ''
        let a = ''
        let regRgba = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/    // 判断rgb颜色值格式的正则表达式，如rgba(255,20,10,.54)
        let rsa = val.replace(/\s+/g,'').match(regRgba)
        if (!!rsa) {
          r = parseInt(rsa[1]).toString(16)
          r = r.length == 1 ? '0' + r : r
          g = (+rsa[2]).toString(16);
          g = g.length == 1 ? '0' + g : g
          b = (+rsa[3]).toString(16);
          b = b.length == 1 ? '0' + b : b
          a = (+(rsa[5] ? rsa[5] : 1)) * 100
          return { hex: '#' + r + g + b, alpha: Math.ceil(a) }
        } else {
          return { hex: val, alpha: 100 }
        }
    },
    // HEX十六进制颜色值转换为RGB(A)颜色值
    hexToRgb (val) {
      let a = ''
      let b = ''
      let c = ''
      if ((/^#/g).test(val)) {
        a = val.slice(1, 3)
        b = val.slice(3, 5)
        c = val.slice(5, 7)
        let r = 'rgba(' + parseInt(a,16) + ',' + parseInt(b,16) + ',' + parseInt(c,16) + ''
        return r // {rgba:'rgb(' + parseInt(a,16) + ',' + parseInt(b,16) + ',' + parseInt(c,16) + ')'}
      } else {
        return '0' // {rgba:'0,0,0,0'}
      }
    }
  },

  watch: {
    seriesIsRow () {
      this.setSeries()
    },

    isSmooth () {
      this.setSeries()
    },

    areaStyle () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
